<template>
	<view class="loginNname">
		<view class="inputLogin">
			<input type="text" value="" placeholder="请输入用户名" v-model="userName" />
			<input type="password" value="" placeholder="请输入密码" v-model="password" />
		</view>
		<button type="primary" @click="loginReq">登录</button>
		<text>未注册的用户将自动创建账号</text>
		<text @click="jumpReg">注册</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: "",
				password: ""
			}
		},
		methods: {
			jumpReg() {
				uni.navigateTo({
				    url: '/pages/register/register'
				});
			},
			loginReq() {
				uni.showLoading({
				    title: '登录中',
				});
				uni.request({
					url: "http://123.57.67.148:3000/mock/591/login",
					method: "POST",
					data: {
						userName: this.userName,
						password: this.password
					},
					header: {
						"custom-header": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						setTimeout(function () {
						    uni.hideLoading();
						}, 1000);
						if (res.data.code == 200){
							this.$store.state.user.userName = this.userName;
							this.$store.state.user.password = this.password;
							uni.showToast({
								title: res.data.msg
							});
							setTimeout(function () {
							    uni.switchTab({
							    	url: "/pages/home/home"
							    })
							}, 1000);
						} else {
							uni.showToast({
								icon: "none",
								title: "用户名或密码错误"
							})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
.inputLogin {
	position: absolute;
	top: 400rpx;
	left: 0;
	right: 0;
	/* width: 500rpx; */
	height: 220rpx;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.inputLogin > input {
	border-bottom: 2rpx solid #dcdcdc;
	height: 60rpx;
}
.loginNname > button {
	position: absolute;
	bottom: 400rpx;
	left: 0;
	right: 0;
	margin-left: 20rpx;
	margin-right: 20rpx;
	background-color: #FED501;
}
.loginNname > text:nth-of-type(1) {
	position: absolute;
	bottom: 340rpx;
	left: 20rpx;
	font-size: 20rpx;
	color: #b5b5b5;
}
.loginNname > text:nth-of-type(2) {
	position: absolute;
	bottom: 330rpx;
	right: 20rpx;
	color: #FED501;
}
</style>
